

<template>
	<div class="info-panel">
		<div v-if="title" class="panel-title">{{ title }}</div>
		<div class="panel-content">
			<slot></slot>
		</div>
	</div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
defineProps<{
	title?: string;
}>();
</script>

<style lang="less" scoped>
@import "../variables.less";

.info-panel {
	border-radius: 5px;
	padding: @panel-padding;
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.panel-title {
	font-size: 16px;
    position: relative;
    padding-left: 30px;
    color: #fff;
	font-weight: 600;
    flex-shrink: 0;
    background: url("/src/assets/titile_bg.png") no-repeat;
    background-size: 100% 200%;
    background-position-x: -20px;
    background-position-y: -20px;
    height: 40px;
    line-height: 40px;

	// &::before {
	// 	content: "";
	// 	position: absolute;
	// 	left: 0;
	// 	top: 50%;
	// 	transform: translateY(-50%);
	// 	width: 5px;
	// 	height: 20px;
	// 	background: linear-gradient(
	// 		to bottom,
	// 		@primary-color,
	// 		@secondary-color
	// 	);
	// }
}

.panel-content {
	flex-grow: 1;
	position: relative;
	display: flex;
	flex-direction: column;
}
</style>